<template>
  <div style="position: relative;">
    <div>
      <div class="ht-head-wrap">
        <div class="title-item title-item-active"><router-link to="/ng-overall-view">全景农谷</router-link></div>
        <div class="title-item"><router-link to="/sx-famous">三品一标</router-link></div>
        <div class="title-item"><router-link to="/sx-digital-greatCause">数字农业</router-link></div>
        <div class="title-item"><router-link to="/sx-technology">科技研发</router-link></div>
        <div class="title-item"><router-link to="/ng-remote-sensing">卫星遥感</router-link></div>
      </div>

      <div class="ht-content clear-float">
        <div class="ng-content-left"><ng-left :buildIndex="index"></ng-left></div>
        <div class="content-middle"><ng-middle ref="Middle"></ng-middle></div>
        <div class="ng-content-right"><ng-right></ng-right></div>
      </div>
    </div>
  </div>
</template>

<script>
import NgLeft from './ng-left/ng-left.vue';
import NgMiddle from './ng-middle/ng-middle.vue';
import NgRight from './ng-right/ng-right.vue';
export default {
  data() {
    return {
      timeTicket: null,
      index: 1
    };
  },
  components: {
    NgLeft,
    NgMiddle,
    NgRight
  },
  mounted() {
	  //iframe向父页面发送消息 iframe已经就绪
    window.addEventListener('message', event => {
      if (event.data.start) {
        this.$refs.Middle.display = true;
        this.$refs.Middle.myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: 0
        });
        this.startTimeTicket();
      }
    });
  },
  methods: {
    name() {},
    startTimeTicket() {
      this.timeTicket = setInterval(() => {
        this.$refs.Middle.switchTo(this.index);
        this.index++;
        if (this.index == 10) {
          this.index = 0;
        }else if (this.index == 4){
          this.index ++;
        }
      }, 15000);
    }
  }
};
</script>

<style lang="scss" scoped>
.content-middle {
  top: 0px !important;
  width: 3072px;
  left: 0;
  padding: 0;
}
  .ng-content-left {
    position: absolute;
    left: 0;
    z-index: 9;
    width: 505px;
    height: 100%;
    padding: 125px 0 20px 0;
    box-sizing: border-box;
  }
  .ng-content-right {
    position: absolute;
    right: 0;
    z-index: 9;
    width: 460px;
    height: 100%;
    padding: 125px 0 20px 0;
    box-sizing: border-box;
  }
</style>
